<template>
    <div>
        <div class="goodsList">
            <div class="goods" v-for="item in data.data" :key="item.id">
                <img :src="item.goods_img" alt="">
                <div class="info">
                    <span class="title">{{ item.title }}</span>
                    <span class="price">{{ item.shop_price_formated }}</span>
                    <span class="labels">
                        <div class="label" v-for="label in item.goods_label" :key="label.id">
                            <img :src="label.formated_label_image" alt="">
                        </div>
                    </span>
                </div>
            </div>
        </div>
        <div class="nomore" v-if="data.isNoMore">没有更多了</div>
    </div>
</template>

<script>
export default {
    props: ["data"],
}
</script>

<style scoped>
.goodsList {
    width: 94.6667vw;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    gap: 2.6667vw;
}

.goods {
    width: 45.8667vw;
    border-radius: 2.6667vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    >img {
        width: 45.8667vw;
        height: 45.8667vw;
    }
}

.info {
    display: flex;
    flex-direction: column;
    height: 32vw;
    background-color: #fff;
    .title {
        width: 170px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 6.4vw;
        font-size: 3.7333vw;
        padding: 2.6667vw 2.6667vw 0;
        box-sizing: border-box;
    }
    .price{
        text-align: left;
        color: red;
        font-size: 4.8vw;
        padding-left: 2.6667vw;
        font-weight: bold;
        line-height: 8vw;
    }
    .labels{
        display: flex;
        gap: 0 1.3333vw;
        padding-left: 2.6667vw;
        img{
            width: 7.4667vw;
            height: 4.2667vw;
        }
    }
}
</style>